<template>
  <zm-view ref="view">
    <zm-navbar :border-bottom="false" background="transparent"> </zm-navbar>
    <image class="view-bg" :src="baseInfo.logo || useImage('/zuimei-film-oss/1.0.0/images/login-bg.png')" mode="scaleToFill" />
    <view class="content-wrap">
      <view class="flex flex-col px-30">
        <text class="font-68 font-700">HELLO!</text>
        <text class="font-32">欢迎来到{{ baseInfo.priSubject || manifest.name }}</text>
      </view>
      <view class="main-wrap">
        <zm-tabs v-model="tabVal" :list="tabs"></zm-tabs>
        <block v-if="tabVal === 'code'">
          <view class="mt-57 mb-26 text-999 text-center mt-20">未注册的手机号将自动注册并登录</view>
          <view class="input-wrap">
            <input v-model="form.mobile" class="input" type="number" maxlength="11" placeholder="请输入手机号" />
          </view>
          <view class="input-wrap">
            <input v-model="form.code" class="input" type="number" maxlength="6" placeholder="请输入验证码" />
            <zm-button width="180rpx" height="64rpx" round :disabled="codeBtn" @click="handleGetCode">{{ codeBtnText }}</zm-button>
          </view>
          <zm-button custom-class="mt-8 mb-30" size="large" round :disabled="isDisabledCodeLogin" @click="handleCodeLogin">登录</zm-button>
        </block>
        <!-- #ifdef APP-PLUS -->
        <view class="flex justify-center pt-50">
          <zm-button type="default" text text-size="26rpx">一键登录</zm-button>
        </view>
        <!-- #endif -->
        <view class="footer-wrap">
          <!-- 微信登录 -->
          <!-- <view class="mb-44">
            <u-icon name="weixin-circle-fill" color="#19cb44" size="78rpx"></u-icon>
          </view> -->
          <!-- 协议 -->
          <zm-checkbox v-model="isAgreest" icon-size="28rpx" round>
            <view class="checkbox-text">
              <text> 我已认证阅读、理解并同意 </text>
              <text class="text-theme" @click.stop="handleToUserAt">《{{ baseInfo.priSubject || manifest.name }}用户协议》</text>
              <text class="text-theme" @click.stop="handleToUserPyAt">《{{ baseInfo.priSubject || manifest.name }}隐私协议》</text>
            </view>
          </zm-checkbox>
        </view>
      </view>
    </view>
    <u-code ref="code" :seconds="60" @start="onCodeCountdownStart" @change="onCodeCountdownChange"></u-code>
    <zm-dialog ref="dialog" title="阅读并同意以下协议" @confirm="isAgreest = true">
      <text>为了保证您的个人信息安全，使用登录 功能需要先阅读并同意</text>
      <text class="text-theme" @click.stop="handleToUserAt">《{{ baseInfo.priSubject || manifest.name }}用户协议》</text>
      <text class="text-theme" @click.stop="handleToUserPyAt">《{{ baseInfo.priSubject || manifest.name }}隐私协议》</text>
    </zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import manifest from "@/manifest.json"
import { mapActions, mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      manifest,
      form: {
        mobile: "",
        code: ""
      },
      codeBtn: false, // 是否禁用验证码按钮
      codeBtnText: "获取验证码", // 验证码按钮文字
      isAgreest: false,
      tabs: [
        { text: "验证登录", value: "code" }
        // { text: "密码登录", value: "password" }
      ],
      tabVal: "code"
    }
  },
  computed: {
    isDisabledCodeLogin() {
      return !this.form.mobile || !this.form.code
    },
    ...mapGetters(["userAt", "baseInfo", "userPyAt"])
  },
  onLoad() {
    this.isAgreest = uni.$getCache("isAgreest") || false
  },
  methods: {
    // 验证码登录
    handleCodeLogin(_, next) {
      if (this.isAgreest) {
        if (uni.$check.isPhoneNo(this.form.mobile)) {
          next.loading(true, "登录中")
          uni.$api.public
            .mobileLogin(this.form)
            .then(async () => {
              await this.getUserInfo({ handleError: true })
              next.loading(false)
              uni.$toast({ type: "success", content: "登录成功", mask: true })
              uni.$emit(`${uni.$fromRoute}-auth`)
              setTimeout(() => uni.navigateBack(), 1500)
            })
            .catch(() => {
              next.loading(false)
            })
        } else {
          uni.$toast("手机号格式不正确，请重新输入")
        }
      } else {
        this.$refs.dialog.open({
          showCancelButton: true,
          cancelButtonText: "不同意",
          confirmButtonText: "已阅读并同意"
        })
      }
    },
    // 获取验证码
    async handleGetCode() {
      if (this.isAgreest) {
        if (uni.$check.isPhoneNo(this.form.mobile)) {
          await uni.$api.public.sendSms({ mobile: this.form.mobile, codeType: "login" })
          this.$refs.code.start()
        } else {
          uni.$toast("手机号格式不正确，请重新输入")
        }
      } else {
        this.$refs.dialog.open({
          showCancelButton: true,
          cancelButtonText: "不同意",
          confirmButtonText: "已阅读并同意"
        })
      }
    },
    // 跳转用户协议
    handleToUserAt() {
      this.toView({
        url: "pages/person/user-agreement/user-agreement",
        params: {
          type: "userAt",
          title: `${this.baseInfo.priSubject || this.manifest.name}用户协议`
        }
      })
    },
    // 跳转用户隐私协议
    handleToUserPyAt() {
      this.toView({
        url: "pages/person/user-agreement/user-agreement",
        params: {
          type: "userPyAt",
          title: `${this.baseInfo.priSubject || this.manifest.name}隐私协议`
        }
      })
    },
    // 验证码倒计时
    onCodeCountdownChange(text) {
      this.codeBtnText = text
    },
    // 验证码倒计时开始
    onCodeCountdownStart() {
      this.codeBtn = true
    },
    ...mapActions(["getUserInfo"])
  }
}
</script>

<style lang="scss" scoped>
.view-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.content-wrap {
  flex: 1;
  z-index: 1;
  display: flex;
  position: relative;
  padding: 75rpx 24rpx;
  padding-bottom: 0;
  /* #ifdef MP */
  padding-top: 40rpx;
  /* #endif */
  /* #ifdef WEB */
  padding-top: 130rpx;
  /* #endif */
  flex-direction: column;
  .font-68 {
    font-size: 68rpx;
  }
  .main-wrap {
    flex: 1;
    display: flex;
    margin-top: 90rpx;
    position: relative;
    border-radius: 30rpx;
    flex-direction: column;
    background-color: #fff;
    padding: 20rpx 50rpx 0 50rpx;
    .input-wrap {
      display: flex;
      height: 96rpx;
      padding-left: 60rpx;
      padding-right: 28rpx;
      background: #f4f6f7;
      align-items: center;
      margin-bottom: 42rpx;
      border-radius: 48rpx;
      justify-content: space-between;
      .input {
        flex: 1;
        font-size: 32rpx;
        ::v-deep .input-placeholder {
          color: #999999;
          font-size: 32rpx;
        }
      }
    }
    .footer-wrap {
      display: flex;
      display: flex;
      padding: 0 10rpx;
      margin-top: auto;
      align-items: center;
      margin-bottom: 73rpx;
      flex-direction: column;
      justify-content: center;
      .checkbox-text {
        line-height: 1.5;
      }
    }
  }
}
</style>
